Skip to content

Conversation

@aaronshekey
Copy link

This pull request is an attempt to base all button and alert colors on global color variables. In theory, should you want to change these high-level variables, you'd only have to do it one spot. This should lay some baby-step groundwork for changing some of the main colors to support better accessibility through higher contrast modes or perhaps, even theming.

Aaron Shekey added 25 commits March 30, 2015 13:33
Kills text shadow and slightly darkens green
Darkens up the disabled state just a little to eliminate the need for a
text-shadow
Darkens the green color used throughout to provide a bit more contrast
and reduce fluorescence.
With the darker color, we need to make sure the blue outline isn't
vibrating too much.
Focused objects should stay on top of everything in the z-order stack.
This rolls back to commit 88a53ea.
Conflicts:
	css/.primer-stats.md
	css/primer.css
Basing the default alert on the brand-blue variable
Alert error is now based on $brand-red.
Make alert-warn based on brand-orange

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Color white should be written in hexadecimal form as #ffffff

@amosie
Copy link

amosie commented May 5, 2015

All flash colours already pass AA which is a good thing.

However, I think we need to take a step back and ask the following:

  • Do we need multiple flash colours?
  • Do users understand what the different colours mean?
    • Do they need to?
  • Are the icons in flash messages serving a need?

I find text on a coloured background hard to read, how about removing the background all together? 😄

screen shot 2015-05-05 at 14 14 48

@bleikamp
Copy link

bleikamp commented May 9, 2015

how about removing the background all together?

I think it's important that the flash messages stand out from the rest of the page (e.g. not a white background) and are also aesthetically "pleasing" for lack of a better word. We can definitely change things around, but I think the current flash messages with rounded corners and subtle background colors still look better than just thick borders around a message.

@aaronshekey
Copy link
Author

I agree with @bleikamp here, but I'm not sure the implementation in this PR is better than what we've got outside of the fact that it's built on brand-color variables.

@nickserv
Copy link
Contributor

@bleikamp @aaronshekey Agreed.

@mdo
Copy link
Contributor

mdo commented May 11, 2015

Yeah, basing the blue alert on our blue color variable feels great, but the other two feel off.

@aaronshekey
Copy link
Author

Ok @mdo. Kept things based on variables, but swapped for the original colors you specified. There should be no visual changes with this pass. Instead of unique colors for borders, backgrounds, etc, they're defined using Sass color functions.

IF we wanted to, we could swap all our color values based on a user-preference for high contrast modes.

@nickserv
Copy link
Contributor

👍

@djch
Copy link

djch commented May 17, 2015

@aaronshekey this may be a dumb question, but how did you reverse engineer all those colors into functions?

Seems like it would be really difficult!

@aaronshekey
Copy link
Author

@djch I eyeballed it using Arc90's tool http://sassme.arc90.com

@aaronshekey aaronshekey closed this Jul 5, 2015
tv104 pushed a commit to tv104/primer that referenced this pull request Aug 12, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants